<template>
	<div class="chat-root">
		<!-- 左侧栏 -->
		<aside class="aside-fixed">
			<!-- 搜索框固定 -->
			<div class="search-bar">
				<el-input v-model="searchText" placeholder="搜索联系人" clearable/>
			</div>
			<!-- 联系人列表滚动 -->
			<div class="list-scroll">
				<div
					v-for="item in filteredList"
					:key="item.id"
					class="chat-item"
					:class="{ active: activeCard === item.id }"
					@click="handleClick(item.id)"
				>
					<img :src="item.avatar" class="avatar"/>
					<div class="name">{{ item.name }}</div>
				</div>
			</div>
		</aside>

		<!-- 右侧主区 -->
		<main class="main-fixed">
			<div class="chat-container">
				<div class="chat-header">聊天 - {{ activeCard ? ('联系人 ' + activeCard) : '请选择联系人' }}</div>
				<div class="chat-messages">
					<div v-for="n in 60" :key="n" class="message">消息内容示例 {{ n }}</div>
				</div>
				<div class="chat-footer">
					<!-- 第一行：图标 -->
					<div class="chat-footer-row icon-row">
						<el-icon
							:size="24"
							class="folder-icon"
							@click="selectFile"
						>
							<FolderOpened/>
						</el-icon>
						<!-- 隐藏文件输入 -->
						<input type="file" ref="fileInput" style="display:none" @change="handleFile"/>
					</div>
					<el-input
						type="textarea"
						:rows="3"
						placeholder="请输入内容"
						class="custom-input"
						v-model="msg">
					</el-input>
					<!-- 第三行：发送按钮 -->
					<div class="chat-footer-row button-row">
						<el-button type="primary" @click="send">发送</el-button>
					</div>
				</div>
			</div>
		</main>
	</div>
</template>

<script setup lang="ts">
import {ref, computed} from "vue";
import {FolderOpened} from '@element-plus/icons-vue'

const contactList = Array.from({length: 30}, (_, i) => ({
	id: i + 1,
	name: `小明${i + 1}`,
	avatar: `https://i.pravatar.cc/40?img=${(i % 70) + 1}`,
}));

const activeCard = ref<number | null>(null);
const searchText = ref("");
const msg = ref("");

const filteredList = computed(() =>
	contactList.filter((c) => c.name.includes(searchText.value))
);

function handleClick(id: number) {
	activeCard.value = id;
}

const fileInput = ref<HTMLInputElement | null>(null)

function selectFile() {
	fileInput.value?.click()
}

function handleFile(event: Event) {
	const target = event.target as HTMLInputElement
	const files = target.files
	if (!files?.length) return
	console.log("选择的文件:", files[0])
}

function send() {
	if (!msg.value.trim()) return;
	console.log("send:", msg.value);
	msg.value = "";
}
</script>

<style scoped>
/* 根容器，不再全屏 */
.chat-root {
	display: flex;
	width: 100%;
	height: 100%; /* 或使用父容器高度 */
	border: 1px solid #e6e6e6;
	background: #fafafa;
	overflow: hidden; /* 整体禁止滚动 */
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial;
}

/* 左侧栏 */
.aside-fixed {
	width: 260px;
	border-right: 1px solid #e6e6e6;
	background: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden; /* 防止 aside 自身滚动 */
}

/* 搜索框固定 */
.search-bar {
	padding: 12px;
	border-bottom: 1px solid #eee;
	background: #fff;
	flex-shrink: 0;
	z-index: 10;
}

/* 联系人列表滚动 */
.list-scroll {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* 联系人项样式 */
.chat-item {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	cursor: pointer;
	transition: background-color 0.15s;
	border-bottom: 1px solid #fafafa;
}

.chat-item:hover {
	background: #f5f5f5;
}

.chat-item.active {
	background: #e6f7ff;
}

.avatar {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	margin-right: 12px;
	object-fit: cover;
}

.name {
	font-size: 14px;
	color: #333;
}

.main-fixed {
	flex: 1; /* 占据右侧剩余空间 */
	position: relative; /* 内部绝对定位参考 */
	background-color:ghostwhite;
	overflow: hidden; /* 不随左侧滚动 */
}

.chat-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	height: 80%;
	max-width: 1200px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;

	background-color: #fafafa;
	border-radius: 8px;
	overflow: hidden;
	/* 边框 + 阴影，实现悬浮感 */
	border: 1px solid rgba(224, 224, 224, 0.8);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.custom-input ::v-deep(.el-textarea__inner) {
	background-color: #fafafa;
	border-color: #fafafa;
}

/* 右侧头部固定 */
.chat-header {
	flex-shrink: 0;
	padding: 20px 16px;
	background: #fff;
	border-bottom: 1px solid #eee;
	font-weight: 500;
}

/* 消息列表滚动 */
.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
}

.chat-footer {
	padding: 12px;
	border: 1px solid #ccc;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.chat-footer-row {
	display: flex;
	align-items: center;
}

.button-row {
	justify-content: flex-end;
}

/* 消息样式 */
.message {
	margin-bottom: 10px;
	padding: 10px;
	background: #fff;
	border-radius: 6px;
	max-width: 70%;
}

.folder-icon {
	cursor: pointer; /* 鼠标悬停变手型 */
	transition: color 0.2s; /* 平滑过渡 */
	color: #606266; /* 默认颜色 */
}

.folder-icon:hover {
	color: #409EFF; /* 悬停变蓝色 */
}
</style>
